<div class="alert alert-warning mb-2">
    <h4 class="alert-heading mb-2">Scrolling children inside perfect-scrollbar</h4>
    <p>You can natively scroll children inside perfect-scrollbar with the mouse-wheel. Scrolling automatically works if the child is a textarea. All other elements need to have the ps-child class.</p>
</div>

<!-- Scroll types section start -->
<section id="scroll-types">

    <div class="row match-height">
        <!-- Vertical Scroll -->
        <div class="col-xl-4 col-lg-12 col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Vertical Scroll</h4>
                </div>
                <div class="card-content">
                    <div class="card-body">
                        <div class="card-text">
                            <p></p>
                        </div>
                        <div class="vertical-scroll scroll-example height-300">
                            <p>Leverage agile frameworks to provide a stack synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.</p>

                            <p>Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touch points for offshoring.</p>

                            <p>Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional click throughs from DevOps. Nano technology immersion along the information highway will close the loop on focusing solely on the bottom line.</p>

                            <p>Podcasting operational change management inside of workflows to establish a framework. Taking seamless key performance indicators offline to maximise the long tail. Keeping your eye on the ball while performing a deep dive on the start-up mentality to derive convergence on cross-platform integration.</p>

                            <p>Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Horizontal Scroll -->
        <div class="col-xl-4 col-lg-12 col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Horizontal Scroll</h4>
                </div>
                <div class="card-content">
                    <div class="card-body">
                        <div class="card-text">
                            <p></p>
                        </div>
                        <div class="horizontal-scroll scroll-example height-300">
                            <div class="horz-scroll-content">
                                <div class="row">
                                    <div class="col-sm-3">
                                        <p>Leverage agile frameworks to provide a stack synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.</p>
                                    </div>
                                    <div class="col-sm-3">
                                        <p>Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touch points for offshoring.</p>
                                    </div>
                                    <div class="col-sm-3">
                                        <p>Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional click throughs from DevOps. Nano technology immersion along the information highway will close the loop on focusing solely on the bottom line.</p>
                                    </div>
                                    <div class="col-sm-3">
                                        <p>Podcasting operational change management inside of workflows to establish a framework. Taking seamless key performance indicators offline to maximise the long tail. Keeping your eye on the ball while performing a deep dive on the start-up mentality to derive convergence on cross-platform integration.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Both Side Scroll -->
        <div class="col-xl-4 col-lg-12 col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Both Side Scroll</h4>
                </div>
                <div class="card-content">
                    <div class="card-body">
                        <div class="card-text">
                            <p></p>
                        </div>
                        <div class="both-side-scroll scroll-example height-300">
                            <img src="../../../app-assets/images/carousel/09.jpg" alt="girl" width="800" height="600">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- // Scroll types section end -->

<!-- Scroll wheel section start -->
<section id="scroll-wheel">

    <div class="row match-height">
        <!-- Wheel Speed : 1 -->
        <div class="col-xl-4 col-lg-12 col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Wheel Speed : 1</h4>
                </div>
                <div class="card-content">
                    <div class="card-body">
                        <div class="card-text">
                            <p>This example demonstrate the default scroll speed for the mouse wheel scroll. Default wheel speed is <code>1</code>. Chage <code>wheelSpeed</code> option to achieve desired wheel speed.</p>
                        </div>
                        <div class="default-wheel-speed scroll-example height-300">
                            <p>Leverage agile frameworks to provide a stack synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.</p>

                            <p>Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touch points for offshoring.</p>

                            <p>Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional click throughs from DevOps. Nano technology immersion along the information highway will close the loop on focusing solely on the bottom line.</p>

                            <p>Podcasting operational change management inside of workflows to establish a framework. Taking seamless key performance indicators offline to maximise the long tail. Keeping your eye on the ball while performing a deep dive on the start-up mentality to derive convergence on cross-platform integration.</p>

                            <p>Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Wheel Speed : 10 -->
        <div class="col-xl-4 col-lg-12 col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Wheel Speed : 10</h4>
                </div>
                <div class="card-content">
                    <div class="card-body">
                        <div class="card-text">
                            <p>This example demonstrate the higher scroll speed for the mouse wheel scroll. Default wheel speed is <code>1</code>. In this example <code>wheelSpeed</code> option is set to <code>10</code>.</p>
                        </div>
                        <div class="higher-wheel-speed scroll-example height-300">
                            <p>Leverage agile frameworks to provide a stack synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.</p>

                            <p>Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touch points for offshoring.</p>

                            <p>Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional click throughs from DevOps. Nano technology immersion along the information highway will close the loop on focusing solely on the bottom line.</p>

                            <p>Podcasting operational change management inside of workflows to establish a framework. Taking seamless key performance indicators offline to maximise the long tail. Keeping your eye on the ball while performing a deep dive on the start-up mentality to derive convergence on cross-platform integration.</p>

                            <p>Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Wheel Speed : 0.1 -->
        <div class="col-xl-4 col-lg-12 col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Wheel Speed : 0.1</h4>
                </div>
                <div class="card-content">
                    <div class="card-body">
                        <div class="card-text">
                            <p>This example demonstrate the lower scroll speed for the mouse wheel scroll. Default wheel speed is <code>1</code>. In this example <code>wheelSpeed</code> option is set to <code>0.1</code>.</p>
                        </div>
                        <div class="lower-wheel-speed scroll-example height-300">
                            <p>Leverage agile frameworks to provide a stack synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.</p>

                            <p>Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touch points for offshoring.</p>

                            <p>Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional click throughs from DevOps. Nano technology immersion along the information highway will close the loop on focusing solely on the bottom line.</p>

                            <p>Podcasting operational change management inside of workflows to establish a framework. Taking seamless key performance indicators offline to maximise the long tail. Keeping your eye on the ball while performing a deep dive on the start-up mentality to derive convergence on cross-platform integration.</p>

                            <p>Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Scroll wheel section end -->

<!-- Scroll options section start -->
<section id="scroll-options">

    <div class="row match-height">
        <!-- Always Visible Scroll -->
        <div class="col-xl-4 col-lg-12 col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Always Visible Scroll</h4>
                </div>
                <div class="card-content">
                    <div class="card-body">
                        <div class="card-text">
                            <p>Add class <code>.always-visible</code> to the wrapper element to make the scrollbar always visible. Srollbars are shown on hover and hidden by default.</p>
                        </div>
                        <div class="visible-scroll always-visible scroll-example height-300">
                            <div class="horz-scroll-content">
                                <div class="row">
                                    <div class="col-sm-3">
                                        <p>Leverage agile frameworks to provide a stack synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.</p>

                                        <p>Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touch points for offshoring.</p>

                                        <p>Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional click throughs from DevOps. Nano technology immersion along the information highway will close the loop on focusing solely on the bottom line.</p>
                                    </div>
                                    <div class="col-sm-3">
                                        <p>Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touch points for offshoring.</p>

                                        <p>Leverage agile frameworks to provide a stack synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.</p>

                                        <p>Podcasting operational change management inside of workflows to establish a framework. Taking seamless key performance indicators offline to maximise the long tail. Keeping your eye on the ball while performing a deep dive on the start-up mentality to derive convergence on cross-platform integration.</p>
                                    </div>
                                    <div class="col-sm-3">
                                        <p>Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional click throughs from DevOps. Nano technology immersion along the information highway will close the loop on focusing solely on the bottom line.</p>

                                        <p>Podcasting operational change management inside of workflows to establish a framework. Taking seamless key performance indicators offline to maximise the long tail. Keeping your eye on the ball while performing a deep dive on the start-up mentality to derive convergence on cross-platform integration.</p>

                                        <p>Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touch points for offshoring.</p>
                                    </div>
                                    <div class="col-sm-3">
                                        <p>Podcasting operational change management inside of workflows to establish a framework. Taking seamless key performance indicators offline to maximise the long tail. Keeping your eye on the ball while performing a deep dive on the start-up mentality to derive convergence on cross-platform integration.</p>

                                        <p>Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional click throughs from DevOps. Nano technology immersion along the information highway will close the loop on focusing solely on the bottom line.</p>

                                        <p>Leverage agile frameworks to provide a stack synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Minimum Scrollbar Length -->
        <div class="col-xl-4 col-lg-12 col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Minimum Scrollbar Length</h4>
                </div>
                <div class="card-content">
                    <div class="card-body">
                        <div class="card-text">
                            <p>Add option <code>minScrollbarLength</code> to set the minimum scrollbar length. In this example we have set minimum scrollbar length to 200px.</p>
                        </div>
                        <div class="min-scroll-length scroll-example height-300">
                            <img src="../../../app-assets/images/carousel/07.jpg" alt="girl" width="800" height="600">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Scrollbar With Margins -->
        <div class="col-xl-4 col-lg-12 col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Scrollbar With Margins</h4>
                </div>
                <div class="card-content">
                    <div class="card-body">
                        <div class="card-text">
                            <p>Add class <code>.large-margin</code> to the wrapper to have large margins on both sides.</p>
                        </div>
                        <div class="scrollbar-margins large-margin scroll-example height-300">
                            <img src="../../../app-assets/images/carousel/10.jpg" alt="girl" width="800" height="600">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- // Scroll options section end -->

<!-- Scroll events section start -->
<section id="scroll-events">

    <div class="row match-height">
        <!-- Default Handlers -->
        <div class="col-xl-4 col-lg-12 col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Default Handlers</h4>
                </div>
                <div class="card-content">
                    <div class="card-body">
                        <div class="card-text">
                            <p>This example supports all the handlers. Here is the list of all supported handlers : <code>'click-rail'</code>, <code>'drag-scrollbar'</code>, <code>'keyboard'</code>, <code>'wheel'</code>, <code>'touch'</code>.</p>
                        </div>
                        <div class="default-handlers scroll-example height-300">
                            <img src="../../../app-assets/images/carousel/06.jpg" alt="girl" width="800" height="600">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- No Keyboard -->
        <div class="col-xl-4 col-lg-12 col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">No Keyboard</h4>
                </div>
                <div class="card-content">
                    <div class="card-body">
                        <div class="card-text">
                            <p>This example supports all the handlers except keyboard. Here is the list of all supported handlers : <code>'click-rail'</code>, <code>'drag-scrollbar'</code>, <code>'wheel'</code>, <code>'touch'</code>.</p>
                        </div>
                        <div class="no-keyboard scroll-example height-300">
                            <img src="../../../app-assets/images/carousel/03.jpg" alt="girl" width="800" height="600">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Click and Drag -->
        <div class="col-xl-4 col-lg-12 col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Click and Drag</h4>
                </div>
                <div class="card-content">
                    <div class="card-body">
                        <div class="card-text">
                            <p>This example supports only two handlers. Here is the list of supported handlers : <code>'click-rail'</code>, <code>'drag-scrollbar'</code>.</p>
                        </div>
                        <div class="click-drag-handler scroll-example height-300">
                            <img src="../../../app-assets/images/carousel/05.jpg" alt="girl" width="800" height="600">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- // Scroll events section end -->